<!-- careLabel表单弹窗 -->
<form id="careLabelForm" lay-filter="careLabelForm" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <input name="labelType" type="hidden"/>
    <input name="remark" type="hidden"/>
    <input name="sort" type="hidden" />
    <div class="layui-form-item layui-hide">
        <label class="layui-form-label">标签编号</label>
        <div class="layui-input-block">
            <input name="labelCode" placeholder="请输入标签编号" type="text" class="layui-input" maxlength="20"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签名称</label>
        <div class="layui-input-block">
            <input name="labelName" placeholder="请输入标签名称" type="text" class="layui-input" maxlength="50"
                   lay-verify="required" required autocomplete="off"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">背景颜色</label>
        <div class="layui-input-inline">
            <input name="bgColor" placeholder="请输入背景颜色" type="text" class="layui-input" lay-verify="required" autocomplete="off"/
                   required/>
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div data-id="bgColorPicker"></div>
        </div>
        <div class="layui-inline" style="left:-30px;width:40px;">
            <select data-id="bgColorSelect" lay-filter="careLabelForm-bgColor-select" >
                <option value="" data-default=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">字体颜色</label>
        <div class="layui-input-inline">
            <input name="fontColor" placeholder="请输入字体颜色" type="text" class="layui-input" lay-verify="required" autocomplete="off"/
                   required/>
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div data-id="fontColorPicker"></div>
        </div>
        <div class="layui-inline" style="left:-30px;width:40px;">
            <select data-id="fontColorSelect" lay-filter="careLabelForm-fontColor-select">
                <option value="" data-default=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细内容</label>
        <div class="layui-input-block">
            <textarea name="detailContent" placeholder="" autocomplete="off" class="layui-textarea" ></textarea>
        </div>
    </div>
    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
        <button class="layui-btn" lay-filter="careLabelForm-submit" type="button" lay-submit>保存</button>
    </div>

</form>

<script>
    layui.use(['layer', 'form', 'admin','http','tools','colorpicker'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var http = layui.http;
        var tools = layui.tools;
        var colorpicker = layui.colorpicker;
        var device = layui.device();

        var viewId = "#careLabelForm";
        var view = $(viewId);
        var labelName = view.find("input[name='labelName']");
        var bgColor = view.find("input[name='bgColor']");
        var fontColor = view.find("input[name='fontColor']");
        var bgColorSelect = view.find('[data-id="bgColorSelect"]');
        var fontColorSelect = view.find('[data-id="fontColorSelect"]');
        var bgColorPicker = view.find("div[data-id='bgColorPicker']");
        var fontColorPicker = view.find("div[data-id='fontColorPicker']");

        var param = tools.param;

        var fnRender = function (predefineColors) {
            // 回显careLabel数据
            if(param.action == 2) {
                form.val('careLabelForm', param.data);
            }

            //背景颜色
            labelName.css('background-color', bgColor.val());
            colorpicker.render({
                elem: bgColorPicker
                , color: bgColor.val()
                , done: function (color) {
                    bgColor.val(color);
                    labelName.css('background-color', color);
                }
                , predefine: true
                , colors: predefineColors
                , change: function (color) {
                    bgColor.val(color);
                    labelName.css('background-color', color);
                }
            });
            //输入变化是修改背景颜色
            bgColor.change(function () {
                labelName.css('background-color', bgColor.val());
            })
            if(device.ie){
                bgColor.keydown(function (event) {
                    event.keyCode ==13 && labelName.css('background-color', bgColor.val());
                })
            }

            //字体颜色
            labelName.css('color', fontColor.val());
            colorpicker.render({
                elem: fontColorPicker
                , color: fontColor.val()
                , done: function (color) {
                    fontColor.val(color);
                    labelName.css('color', color);
                }
                , predefine: true
                , colors: predefineColors
                , change: function (color) {
                    fontColor.val(color);
                    labelName.css('color', color);
                }
            });
            fontColor.change(function () {
                labelName.css('color', fontColor.val());
            });
            if(device.ie){
                fontColor.keydown(function (event) {
                    event.keyCode ==13 && labelName.css('color', fontColor.val());
                })
            }

            tools.select.options(bgColorSelect,predefineColors,bgColor.val());
            tools.select.options(fontColorSelect,predefineColors,fontColor.val());
            form.render('select','careLabelForm');

            //渲染下来列表颜色
            bgColorSelect.parent().find("dl dd").each(function(){
               var value = $(this).attr("lay-value");
               if(value && value.length>0){
                   $(this).css("background-color",value);
               }
            });
            fontColorSelect.parent().find("dl dd").each(function(){
                var value = $(this).attr("lay-value");
                if(value && value.length>0){
                    $(this).css("background-color",value);
                }
            });

            form.on('select(careLabelForm-bgColor-select)',function(data){
                bgColor.val(data.value);
                bgColor.removeClass("placeholdersjs");
                labelName.css('background-color', data.value);
                bgColorSelect.parent().find(".layui-select-title input").val("");
                bgColorSelect.parent().find(".layui-select-title input").css("background-color",data.value);
            });
            form.on('select(careLabelForm-fontColor-select)',function (data) {
                fontColor.val(data.value);
                fontColor.removeClass("placeholdersjs");
                labelName.css('color', data.value);
                fontColorSelect.parent().find(".layui-select-title input").val("");
                fontColorSelect.parent().find(".layui-select-title input").css("background-color",data.value);
            });

            //IE低版本不显示ColorPicker
            if(device.ie && device.ie < 11){
                bgColorPicker.addClass("layui-hide");
                fontColorPicker.addClass("layui-hide");
            };
            bgColorSelect.parent().find(".layui-select-title input").val("");
            fontColorSelect.parent().find(".layui-select-title input").val("");

            bgColorSelect.parent().find(".layui-select-title input").attr("placeholder","");
            fontColorSelect.parent().find(".layui-select-title input").attr("placeholder","");

            //获取sort
            if(param.action === 1) {
                (function () {
                    var cache = param.tableIns.getCache();
                    var sort = tools.getDataMax(cache, "sort") + 1;
                    view.find("input[name='sort']").val(sort);
                })();
            }
        };

        //获取预选颜色
        http.getCodeList('Color',function(res) {
            if(res.ok){
                var predefineColors = [];
                for(var i=0;i<res.data.length;i++){
                    predefineColors.push(res.data[i].code);
                }
                fnRender(predefineColors);
            }else{
                admin.closeDialog('#careLabelForm');
            }
        });

        // 表单提交事件
        form.on('submit(careLabelForm-submit)', function (data) {
            http.post('careLabel/save', data.field, function (res) {
                layer.closeAll('loading');
                if (res.ok) {
                    if(param.action===2){
                        param.rowObj.update(res.data);
                        var index = param.rowObj.tr.attr("data-index");
                        param.tableIns.updateRow(index,res.data,false,true);
                    }else if(param.action===1){
                        param.tableIns.addRow(res.data,null,true);
                    }
                    admin.closeDialog('#careLabelForm');
                } else {
                    http.fail(data);
                }
            });
            return false;
        });
    });
</script>